<template>
    <NavBar title="商品详情" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item>
            <img :src="images.img1" alt="">
        </van-swipe-item>
        <van-swipe-item>
            <img :src="images.img2" alt="">
        </van-swipe-item>
        <van-swipe-item>
            <img :src="images.img3" alt="">
        </van-swipe-item>
        <van-swipe-item>
            <img :src="images.img4" alt="">
        </van-swipe-item>
    </van-swipe>
    <van-action-bar>
        <van-action-bar-icon @click="gw" icon="cart-o" text="购物车" :badge="num" />
        <van-action-bar-button @click="jia" type="warning" text="加入购物车" />
        <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
</template>

<script setup lang="ts">

import { NavBar, showSuccessToast } from "vant";

import { ref, onMounted } from "vue";

import { shangPinXiangQing, Addgouwuche, gouwuche } from "../api/index";

import { useRoute, useRouter } from "vue-router";

const route = useRoute()

const router = useRouter()

const images = ref()

const num = ref()


const gw = () => {
    router.push('/gouwuche')
}

const jia = async () => {
    const userid = localStorage.getItem('userid') as string
    console.log(userid);

    const res = await Addgouwuche({
        userid: userid,
        proid: images.value.proid,
        num: '1'
    })

    console.log(res);



    const id = localStorage.getItem('userid') as string
    // console.log(id);
    const result = await gouwuche(id);
    // console.log(result.data.data.length);
    num.value = result.data.data.length

    showSuccessToast(res.data.message);

}

const onClickLeft = () => {
    router.go(-1)
}


onMounted(async () => {
    // console.log(route.params.id);
    const res = await shangPinXiangQing(route.params.id as string)
    images.value = res.data.data 
    console.log(images.value);
    const id = localStorage.getItem('userid') as string
    // console.log(id);
    const result = await gouwuche(id);
    // console.log(result.data.data.length);
    num.value = result.data.data.length

})

</script>

<style scoped>
img {
    width: 100%;

}
</style>